[Polymer]Polymer3.0が公開されたので触ってみた

Polymer3.0

PolymerはGoogle社製のJavaScriptフレームワークで「Web Components」「Material Design」などモダンなWEBサービスを作る事ができます。
Developers.IOでは過去にこのような記事を書いていました。

• [Polymer] Material Design を使った Web ページを作ってみる
• Polymer.dart でも Material Design

個人的にもPolymer1.0が出た頃にプロダクトで軽く利用した程度だったのですが、 今年に入りPolymer3.0が公開されましたので少し触ってみました。

What's new in Polymer3.0

2.xではBowerを利用していましたが、npmに変わりました。
また、polymer-cliではserveやbuild、testのコマンドが用意されています。

2.xからの変更点

• HTML Import → ES6
• Bower → npm
  • デフォルトコンポーネント類も npm で管理

3.0での追加

• polymer-cli
  • 開発、テスト、および展開をサポートする

公式ページ

Install Polymer 3.0

前提

• git
• node
• npm

が動く環境を用意します。

polymer-cliインストール

$ npm install -g polymer-cli
$ polymer --version

polymer-cliコマンド表です

$ polymer build (for app projects only)
$ polymer init
$ polymer install
$ polymer lint
$ polymer serve
$ polymer test

開発に必要なコマンドは一通りありそうです。　　 これだけでPolymerで開発を行う環境が用意できました。

サクッと試すサンプル

$ git clone https://github.com/PolymerLabs/start-polymer3.git
$ cd start-polymer3
$ npm install
$ polymer serve

http://127.0.0.1:8081にアクセスする

Polymerが動きました。

流石にこれだけでは寂しいので Getting Started も試します。

Getting Started

公式サイトでは以下の2つを順序立てて解説されていて、非常にわかりやすいです。

1. Build an element
2. Build an app

今回は2.Build an appを試しました。　　
実際に試したソースコードはこちらです。

githubリンク

ハマりどころ

本ブログ執筆時点ではstarter-kitの不具合で同じコンポーネントが複数バージョン入ってしまい、
コンポーネントの呼び出しでエラーとなりました。
node_modulesの中身を入れ直せば解決します。

$ rm -rf node_modules package-lock.json
$ npm install

参考：
https://www.polymer-project.org/blog/2018-05-25-polymer-elements-3-faq

ビルド

polymer build コマンドで生成されるモジュールは以下の3つです。

• esm-bundled: ES modules.
• es6-bundled: AMD modules (ES2015)
• es5-bundled: AMD modules (ES5)

別途トランスパイラを用意しなくていいのは助かります。

まとめ

今回はPolymer3.0を試しました。
昨今のJSフレームワークはAngular、React、Vue.jsが主流と感じてますが、Materialデザインの枠組みで作れるのであればPolymerも使えそうです。